page {
  background: #F7F7F7;
}

.commodity {
  width: 100%;
  height: 100vh;
}


.title {
  height: 75rpx;
  width: 100%;
  background: #fff;

  .title_box2 {
    margin: 0 30rpx;
    display: flex;
    align-items: flex-end;
    height: 100%;

    .nav {
      margin-right: 46rpx;

      .name {
        font-size: 28rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(102, 102, 102, 1);
        padding-bottom: 11rpx;
      }

      .xhx {
        width: 66rpx;
        height: 4rpx;
        background: #fff;
        border-radius: 2rpx;
      }
    }

    .nav_active {
      .name {
        font-size: 32rpx;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: rgba(244, 59, 0, 1);
      }

      .xhx {
        width: 66rpx;
        height: 4rpx;
        background: #FF5A24;
        border-radius: 2rpx;
      }
    }
  }
}

.select {
  width: 100%;
  height: 164rpx;

  .box {
    margin: 0 24rpx 0;
    display: flex;
    flex-wrap: wrap;

    .name {
      font-size: 26rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      color: #333333;
      background: #FFFFFF;
      border-radius: 26rpx;
      border: 1rpx solid #333333;
      padding: 8rpx 16rpx;
      margin-right: 20rpx;
      margin-top: 20rpx;
    }

    .name_active {
      border: 1rpx solid #FF5A24;
      color: #FF5A24;
    }
  }
}

.content {
  .item {
    margin: 30rpx 24rpx 0;
    background: #fff;
    border-radius: 20rpx;
    position: relative;
    padding: 30rpx 0;

    .item_one {
      margin: 0 20rpx;
      display: flex;
      padding-bottom: 30rpx;
      border-bottom: 1rpx solid #F0F0F0;

      .item_left {
        width: 100rpx;
        height: 100rpx;
        border-radius: 10rpx;
      }

      .item_right {
        padding-left: 20rpx;

        .name {
          font-size: 32rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          color: #333333;
        }

        .price_box {
          display: flex;
          align-items: center;
          padding-top: 16rpx;

          .group_price {
            display: flex;
            align-items: center;
            width: 246rpx;

            .v1 {
              font-size: 26rpx;
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              color: #666666;
            }

            .v2 {
              font-size: 26rpx;
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              color: #333333;
            }
          }

          .account_price {
            display: flex;
            align-items: center;
            width: 246rpx;

            .v1 {
              font-size: 26rpx;
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              color: #666666;
            }

            .v2 {
              font-size: 26rpx;
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              color: #FF5A24;
            }
          }
        }

        .num_box {
          display: flex;
          align-items: center;
          padding-top: 16rpx;

          .inventory {
            font-size: 26rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            color: #666666;
            width: 246rpx;
          }

          .sell {
            font-size: 26rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            color: #666666;
            width: 246rpx;
          }
        }

      }
    }

    .item_two {
      // height: 106rpx;
      padding: 30rpx 20rpx 0;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .left {
        .name {
          font-size: 30rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          color: #FFAB00;
        }
        .name2{
          color: rgba(0, 168, 97, 1);
        }
        .name3{
          color: rgba(214, 0, 0, 1);
        }
      }

      .right {
        display: flex;
        align-items: center;

        .btn {
          padding: 0 17rpx;
          height: 48rpx;
          background: #FFFFFF;
          border-radius: 10rpx;
          border: 1rpx solid #FF5A24;
          font-size: 26rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          color: #FF5A24;
          display: flex;
          align-items: center;
          margin-left: 20rpx;
        }
      }
    }

    .item_three {
      // width: 100%;
      // height: 94rpx;
      margin-top: 30rpx;
      padding: 10rpx;
      background: rgba(255, 90, 36, 0.1);
      font-size: 26rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      color: #FF5A24;
      display: flex;
      align-items: flex-start;
      .left {
        display: flex;
        align-items: center;
        .img{
          width: 24rpx;
          height: 24rpx;
        }
      }

      .right {
        flex: 1;
        padding-left: 4rpx;
      }
    }




    .dw {
      position: absolute;
      right: 0;
      top: 0;
      width: 138rpx;
      height: 52rpx;
      background: #FF5A24;
      border-radius: 0rpx 20rpx 0rpx 20rpx;
      font-size: 26rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      color: #FFFFFF;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .dw_active {
      color: #FFFFFF;
    }
  }

  .item:first-child {
    margin: 10rpx 30rpx 0;
  }

  .item_kong {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200rpx;
  }

  .item_T{
    margin: 30rpx 24rpx 0;
    background: #fff;
    border-radius: 20rpx;
    position: relative;
    padding: 30rpx 0;
    display: flex;
    align-items: center;
    .item_left{
      width: 100rpx;
      height: 100rpx;
      border-radius: 10rpx;
    }
    .item_right{
      padding-left:20rpx;
      .top{
        display: flex;
        align-items: center;
        .v1{
          font-size: 30rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 600;
          color: #FF5A24;
        }
        .v2{
          font-size: 30rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 600;
          color: rgba(51, 51, 51, 1);
        }
      }
      .bottom{
        font-size: 24rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #666666;
        display: flex;
        align-items: center;
        padding-top: 10rpx;
        .v2{
         padding-left: 80rpx;
        }
      }
    }
    .dw {
      position: absolute;
      right: 50rpx;
    }
  }
}


.footer {
  margin: 40rpx 24rpx 0;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .btn1 {
    width: 100%;
    height: 78rpx;
    background: #FF5A24;
    border-radius: 20rpx;
    font-size: 28rpx;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.van-popup{
  background: none !important;
}
.root_seal{
  width: 500rpx;
  height: 317rpx;
  background: #fff;
  border-radius: 20rpx;
}

.root_seal .top{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30rpx 0 40rpx;
  font-weight: bold;
  font-size: 32rpx;
}

.root_seal .center{
  padding: 0 30rpx;

}
.root_seal .bottom {

  padding: 0 30rpx;
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-top: 40rpx;
}
.root_seal .bottom .btn1{
  width: 120rpx;
  height: 48rpx;
  background: #E1E1E1;
  border-radius: 10rpx;
display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(51, 51, 51, 1);
}
.root_seal .bottom .btn2{
  width: 120rpx;
  height: 48rpx;
  background: #FF5A24;
  border-radius: 10rpx;
display: flex;
  align-items: center;
  justify-content: center;
  color:#fff;
}